<template>
  <Echart :options="option" :width="width" :height="height"></Echart>
</template>

<script setup lang="ts">
import Echart from "@/components/Echart.vue";
import { ref } from "vue";

const width = "100%";
const height = "100%";
let option = ref({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    boundaryGap: false,
    axisLine: {
      onZero: false,
      lineStyle: {
        color: "#4b87a9",
      },
    },
  },
  yAxis: {
    type: "value",
    axisLine: {
      onZero: false,
      lineStyle: {
        color: "#4b87a9",
      },
    },
    splitLine: {
      //网格线
      show: false,
    },
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 10,
      itemStyle: {
        normal: {
          color: "#fff",
          borderColor: "#4bc8db",
          areaStyle: {
            type: "default",
            opacity: 0.4,
          },
        },
      },
      lineStyle: {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#4C84FF", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#28d016", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        width: 2,
        shadowBlur: 10,
        shadowColor: "rgba(50,227,42,0.5)",
        shadowOffsetX: 10,
        shadowOffsetY: 20,
      },
      areaStyle: {
        normal: {
          color: "rgba(255,255,255,0)",
        },
      },
    },
  ],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
});
</script>

<style scoped></style>
